<template>
  <div class="right">
    
    <div class="topright">
      <div class="toprightone">
        <div></div>
        <div>计划指标总览</div>
        <div></div>
        <!-- <div @click="dialogVisible = true">...</div> -->
        <!-- <div @click="dialogVisible = true">...</div> -->
        <!-- 弹出框 -->
        <div>...</div>
      </div>
      <!-- 滚动条 -->
      <div id="roll" ref="rolled">
        <!-- 指标总览 -->
        <div class="rollone" >
         
         <div class="toprightdiv" v-for="(v, i) in overview[0]" :key="v.id"  >
            <p>
              <!-- <img :src="v.imgs" /> -->
              <i :class="v.clas"></i>
            </p>
            <p>{{ v.classify }}</p>
            <p>{{ v.quantity }}</p>
            <p v-if="i !==1">
                <span>
                <span :style="'width:' + v.Percentages + '%'"></span>
              </span>
              <span v-if="v.Percentages!==0">{{ v.Percentages }}%</span>
              <span v-else style="width:0"></span>
            </p>
            <p v-else>
             <!-- <span v-if=" v.Percentages>0">↑</span><span v-else>↓</span> -->
               优化↑
              {{ v.Percentages }}%</p>
          </div>
          

        </div>
         <div class="rollone" >
 <div class="toprightdiv" v-for="(v, i) in overview[1]" :key="v.id"  >
            <p>
              <!-- <img :src="v.imgs" /> -->
              <i :class="v.clas"></i>
            </p>
            <p>{{ v.classify }}</p>
            <p>{{ v.quantity }}</p>
            <p  v-if="v.Percentages!==0">
              <span>
                <span :style="'width:' + v.Percentages + '%'"></span>
              </span>
              <span>{{ v.Percentages }}%</span>
            
            </p>
           <p v-else><span>
                <span style="width:0;"></span>
              </span></p>
          </div>
          <div class="toprightdiv" style="width: 23%; height: 100px"></div>
         </div>
      </div>

    </div>
    <!-- 弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="585px"
      margin="0px"
      padding="0"
    >
      <div class="motai">
        <div class="xuanze">
          <i class="el-icon-s-management" style="color: #1890ff"></i>
          选择指标
        </div>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          class="motaione"
        >
          <el-checkbox
            v-for="city in cities"
            :label="city"
            :key="city"
            class="motaitwo"
            >{{ city }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <el-button
          @click="dialogVisible = false"
          class="el-icon-error"
          style="width: 80px; height: 30px; display: block"
          >取消</el-button
        >
        <el-button
          @click="pops"
          class="el-icon-success"
          style="width: 80px; height: 30px; display: block; background: #1890ff"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 右下 -->
    <div class="rightbottom">
      <Right />
    </div>
  </div>
</template>

<script>
// import Right from "./rightbottom";

const cityOptions = [
  "净利润",
  "售电量",
  "线损率",
  "营业收入",
  "利润总额",
  "资产负债率",
  "资产总额",
  "产业大修",
  "生产补助大修",
  "零星购置",
  "市场营销",
  "电网数字化",
  "研究开发",
  "管理咨询",
  "教育培训",
  "股权投资",
];
import Right from "../../zujian/rightb.vue";
export default {
  components: {
    Right,
  },
  data() {
    return {
      checkAll: false,
      checkedCities: [
        "净利润",
        "售电量",
        "显损率",
        "营业收入",
        "利润总额",
        "显损率",
        "资产总额",
      ],
      cities: cityOptions,
      isIndeterminate: true,
      drawer: true,
      dialogVisible: false,
      overview: [
        //计划指标总览
        [
          {
            id: "0a",
            classify: "售电量(亿千瓦时)",
            
            clas: "el-icon-s-order",
            quantity: 1915,
            Percentages: 91.40,
          },
          {
            id: "1a",
            classify: "线损率(%)",
           
            clas: "el-icon-s-order",
            quantity: 6.20,
            Percentages: -0.20,
          },
          {
            id: "2a",
            classify: "营业收入（万元）",
           
            clas: "el-icon-s-order",
            quantity: 0,
            Percentages: 0,
          },
          {
            id: "3a",
            classify: "利润总额（万元)",
            clas: "el-icon-s-order",
           
            quantity: 0,
            Percentages: 0,
          },
        ],
        [
          {
            id: "4a",
            classify: "净利润（万元)",
            clas: "el-icon-s-order",
          
            quantity: 0,
            Percentages: 0,
          },
          {
            id: "5a",
            classify: "资产总额（万元)",
          
            clas: "el-icon-s-order",
            quantity: 0,
            Percentages: 0,
          },
          {
            id: "6a",
            classify: "资产负债率（%）",
            clas: "el-icon-s-order",
           
            quantity: "0",
            Percentages: 0,
          },
        ],
      ],
    };
  },
  mounted() {
    this.classicon();
  },
  methods: {
    // 判断是否超出显示区域
    pops() {
      this.dialogVisible = false;
      if (this.checkedCities.length > 8) {
        // let len = this.checkList.length;
        // this.overview.length = len;
        document.getElementById("roll").style.overflowY = "scroll";
      } else if (this.checkedCities.length < 9) {
        document.getElementById("roll").style.overflow = "hidden";
      }
      // console.log("指标总览", this.checkList);
    },
    //  判断计划总览个数，不够添加
    judge() {
      if (this.overview.length % 4 !== 0) {
        let inde = 4 - (this.overview.length % 4); //应该添加多少
        this.overview.length += inde;
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 计划总览icon样式
    classicon() {
      let icons = document.getElementsByClassName("toprightdiv");
      let ico = document.querySelectorAll(".toprightdiv p i");
      // console.log(icons, "66666", ico);
      for (let i = 0; i < ico.length; i++) {
        if (
          i == 0 ||
          i == 3 ||
          i == 4 ||
          i == 7 ||
          i == 8 ||
          i == 11 ||
          i == 12 ||
          i == 15 ||
          i == 16 ||
          i == 19
        ) {
          ico[i].style.color = "#1890FF";
        } else if (
          i == 1 ||
          i == 5 ||
          i == 9 ||
          i == 13 ||
          i == 17 ||
          i == 21 ||
          i == 25
        ) {
          ico[i].style.color = "#FFBC09";
        } else if (
          i == 2 ||
          i == 6 ||
          i == 10 ||
          i == 14 ||
          i == 18 ||
          i == 22
        ) {
          ico[i].style.color = "#8CC473";
        }
      }
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.rollone {
  width: 98%;
  height: 108px;
  border: solid 1px #c3c3c3;
  display: flex;
  justify-content: space-around;

  flex-flow: wrap;
  margin-bottom: 10px;
  padding-left: 2px;
}
#roll {
  width: 580px;
  height: 235px;

  overflow-x: hidden;
  overflow-y: hidden;
  margin: 0 auto;
  /* padding: 2px; */
  /* border: solid 1px #ccc; */
}
#roll::-webkit-scrollbar {
  width: 8px;
}
#roll::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
#roll::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 4px;
}
#roll::-webkit-scrollbar-thumb:hover {
  background: rgb(110, 103, 103);
}
.motai {
  width: 550px;
  height: 250px;
  border-top: solid 1px #ccc;
  padding: 5px;
  position: relative;
}
.motaione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.motaitwo {
  width: 22%;
  line-height: 40px;
}
.xuanze {
  position: absolute;
  top: -40px;
  font-size: 15px;
  color: black;
}
/* .xuanze > i {
  color: #85a296;
} */
.toprightone {
  width: 510px;
  height: 26px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  

}
.toprightone > :nth-child(1) {
  width: 104px;
  height: 1px;
  margin-top: 15px;
  background: #d8d8d8;
}
.toprightone > :nth-child(3) {
  width: 104px;
  height: 1px;
  margin-top: 15px;
  background: #d8d8d8;
}
.toprightone > :nth-child(2) {
  line-height: 35px;
  margin: 0 40px;
  font-size: 16px;
  font-weight: bold;
  font-weight: 700;
}
.toprightone > :nth-child(4) {
  line-height: 7px;
  text-align: center;
  font-size: 15px;
  font-weight: bolder;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: solid 1px #ccc;
  position: absolute;
  right: 6px;
  top: 6px;
  color: #d3d3d3;
  cursor: pointer;
  z-index: 9;
}
.rightbottom {
  width: 508px;
  height: 645px;
}
.fontSize {
  /* display: block; */
  width: 510px;
  height: 24px;
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #595959;
  line-height: 24px;
  margin-top: 12px;
}
.topright {
  padding: 0px 3px 0px 7px;

  width: 508px;
  height: 285px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  margin-bottom: 20px;
  background: #fff;
  border: #ccc solid 1px;
}
.toprightdiv {
  word-break: keep-all;
  white-space: nowrap;
  width: 114px;
  height: 106px;
  padding: 3px 0;
  text-align: center;
  /* background: #ccc; */
  font-size: 15px;
  position: relative;
  cursor: pointer;
  border: solid #fff 1px;
}
/* .toprightdiv:hover :nth-child(2) { */
/* border: solid #ccc 1px; */
/* color: red; */
/* } */
.toprightdiv > p {
  margin-top: 7px;
}
.toprightdiv p i {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  /* border: solid 1px #ccc; */
  border-radius: 15px;
  font-size: 22px;
  /* background: blue; */
}
.toprightdiv p span {
  display: inline-block;
  height: 10px;
}
.toprightdiv p span:nth-child(1) {
  width: 85%;
  background: #ddd;
  position: relative;
  border-radius: 5px;
}
.toprightdiv p span:nth-child(2) {
  width: 15%;
  text-align: right;
  color: #8cc473;
}
.toprightdiv p span:nth-child(1) span {
  display: inline-block;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
  height: 10px;
  left: 0;
  background: #8cc473;
}
.toprightdiv p:nth-child(2) {
  font-size: 12px;
  color: #c3c3c3;
}
.toprightdiv p:nth-child(3) {
  font-size: 15px;
  font-size: 15px;
}
.toprightdiv p:nth-child(4) {
  margin-top: 0;
  color: #ffbc09;
}

.box {
  position: absolute;
  width: 200px;
  height: 50px;
  background: red;
  top: 0;
  bottom: 0;
  /* right: 800px; */
  margin: auto;
}
.right {
  width: 510px;
}
</style>